<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="MasterPage.xhtml">
            <ui:define name="deSlide">
            </ui:define>
            <ui:define name="contents">
                <h:inputHidden value="#{defaultManagerBean.addPId(param['pId'])}"></h:inputHidden>
                <h:form>
                    <script type="text/javascript">
                        $(window).ready(function(){
                            var surl = window.location.search.substring(1);
                            var sParam = surl.split('pId=');
                            if(sParam != ""){
                                $('#slides').hide();
                            }
                        });
                    </script>
                    <div>
                        <div id="slides">
                            <div class="slides_container">
                                <div>
                                    <img width="700px" height="250px"  src="Images/banner/Banner_music_sheet_with_flute.jpg"/>
                                </div>
                                <div>
                                    <img width="700px" height="250px"  src="Images/banner/46647-game-banner.png"/>
                                </div>
                                <div>
                                    <img width="700px" src="Images/banner/game-banner.gif"/>
                                </div>
                                <div>
                                    <img  width="700px" height="250px"  src="Images/banner/the-last-of-us-game-banner.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="DefaultAllbox">
                        <ui:repeat value="#{defaultManagerBean.loadAlbum()}" var="listAlbum">
                            <div class="box">
                                <div class="ShowProductDefault">
                                    <a href="DetailsAlbum.xhtml?id=#{listAlbum.albumID}" class="atest">
                                        <img style="height: 150px; padding: 3px" src="#{listAlbum.albumImage}" 
                                             alt="" title="#{listAlbum.albumName}" width="150px"/>
                                    </a>
                                </div>
                                <div class="boxTitle"><a href="DetailsAlbum.xhtml?id=#{listAlbum.albumID}">#{listAlbum.albumName}</a> </div>
                                <div class="boxPrice">$#{listAlbum.albumPrice}</div>
                            </div>
                        </ui:repeat>
                    </div>
                    <div class="DefaultPaging">
                        <h:commandButton class="DetailsAlbumBtnPaging" value="First" action="#{defaultManagerBean.btnFirst()}" disabled="#{defaultManagerBean.disableFirst}"></h:commandButton>
                        <h:commandButton class="DetailsAlbumBtnPaging" value="Prev" action="#{defaultManagerBean.btnPrevious()}" disabled="#{defaultManagerBean.disablePrev}"></h:commandButton>
                        <h:inputHidden value="#{defaultManagerBean.pageIndex}"></h:inputHidden>
                        <h:outputLabel value="#{defaultManagerBean.pageIndex}"></h:outputLabel>/
                        <h:outputLabel value="#{defaultManagerBean.totalPaging}"></h:outputLabel>
                        <h:commandButton class="DetailsAlbumBtnPaging" value="Next" action="#{defaultManagerBean.btnNext()}" disabled="#{defaultManagerBean.disableNext}"></h:commandButton>
                        <h:commandButton class="DetailsAlbumBtnPaging" value="Last" action="#{defaultManagerBean.btnLast()}" disabled="#{defaultManagerBean.disableLast}"></h:commandButton>
                    </div>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

